<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>ADMIN</title>
    <link rel="stylesheet" href="./css/admin/base.css">
    <link rel="stylesheet" href="./css/admin/app.css">
</head>

<body>
    <div class="app-page">
        <div class="app-page-header">
            <div class="page-title">
                <div class="title">APK</div>
                <div class="btn-group">
                    <a class="z-btn z-primary" data-popup-open=".popup-add">新增</a>
                    <!-- <div class="input-opacity">
                            <a class="z-btn z-primary">上传</a>
                            <input type="file" class="input">
                        </div> -->
                </div>
            </div>
        </div>
        <div class="app-page-content">
            <div class="app-card">
                <div class="app-card-body">
                    <div class="z-btn-group z-mab">
                        <a class="batch-delete z-btn z-primary">批量删除</a>
                    </div>
                    <table class="z-table">
                        <thead>
                            <th></th>
                            <th>
                                <input type="checkbox" class="j-checkbox-all">
                            </th>
                            <th>#</th>
                            <th>版本号</th>
                            <th>上传时间</th>
                            <th>下载地址</th>
                            <th>操作</th>
                        </thead>
                        <tbody>
                            <tr data-id="123">
                                <td class="btn-expand z-center">
                                    <i class="fa fa-angle-right"></i>
                                </td>
                                <td>
                                    <input type="checkbox" class="j-checkbox">
                                </td>
                                <td>1868</td>
                                <td>1.0</td>
                                <td> 2018-04-05</td>
                                <td>http://bk.xinchao.mobi:80/HMIPS/res/apk/test.apk</td>
                                <td class="btn-group">
                                    <a class="btn-delete">删除</a>
                                </td>
                            </tr>
                            <tr class="expand-info">
                                <td></td>
                                <td colspan="8">
                                    <li>发布时间：2018-03-07 15:09:16</li>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                    <div class="z-page z-pat z-fr">
                        <span class="active">1</span>
                        <a href="#">2</a>
                        <a href="#">3</a>
                        <a href="#" class="last">尾页</a>
                        <a href="#" class="next">下一页</a>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <!-- 新增 -->
    <div class="popup-add popup-default z-popup z-fixed z-df z-flex-cc z-hide">
        <div class="bg" data-popup-close></div>
        <div class="body">
            <div class="title">新增</div>
            <div class="content">
                <form>
                    <div class="form-item row">
                        <div class="label">
                            <label>版本名称</label>
                        </div>
                        <div class="body">
                            <input type="text" name="name" data-name="版本名称" data-rule="required">
                        </div>
                    </div>
                    <div class="form-item row">
                        <div class="label">
                            <label>上传APK</label>
                        </div>
                        <div class="body" style="min-width: 350px;">
                            <div class="upload upload-file z-mab" data-input-name="apk" data-limit="1" data-url="http://xc-dmp.37226.com/api/upload" data-fieldname="files">
                                <div class="upload-list upload-list-text"></div>
                                <div class="upload-tips">只能上APK文件，格式 .apk</div>
                                <div class="upload-error"></div>
                                <div class="input-opacity">
                                    <input type="file" class="input" accept=".apk">
                                    <a class="z-btn z-default"><i class="fa fa-upload"></i> 上传</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-item row">
                        <div class="label">
                            <label>版本号</label>
                        </div>
                        <div class="body">
                            <input type="text" name="version" data-name="版本号" data-rule="required">
                        </div>
                    </div>
                    <div class="form-item row">
                        <div class="label">
                            <label>包名</label>
                        </div>
                        <div class="body">
                            <input type="text" name="version" data-name="包名" data-rule="required">
                        </div>
                    </div>
                    <div class="form-item row">
                        <div class="label">
                            <label>活动区域</label>
                        </div>
                        <div class="body">
                            <select name="area" data-name="活动区域" data-rule="required">
                                <option value="">==请选择机型==</option>
                                <option value="1">机型一</option>
                            </select>
                        </div>
                    </div>
                </form>
                <div class="z-btn-group">
                    <a class="btn-submit z-btn z-primary">确定</a>
                    <a class="z-btn z-default" data-popup-close>取消</a>
                </div>
            </div>
        </div>
    </div>

    <script src="lib/jquery.min.js"></script>
    <script src="lib/layer-v3.1.1/layer/layer.js"></script>
    <script src="js/popup.js"></script>
    <script src="js/form.js"></script>
    <script src="js/admin/app.js"></script>
    <script src="js/admin-upload.js"></script>
    <script>
        // 保存
        var form = $(".popup-add form").form({
            submitSelector: ".popup-add .btn-submit",
            msg: function(msg) {
                popup.tipsTop(msg, 'warning');
            },
            submit: function() {

                var data = {};

                $.each($(".popup-add form").serializeArray(), function(index, field) {
                    if (data[field.name]) {
                        data[field.name] += "," + field.value;
                    } else {
                        data[field.name] = field.value;
                    }
                })

                console.log('提交的数据', data);

                if (!data.apk) {
                    popup.tipsTop("请上传apk", 'warning');
                }
            }
        })

        // 批量删除
        $('.batch-delete').click(function(params) {
            var id = getSelecteId();
            if (id != '') {
                if (confirm('确认是否删除')) {
                    popup.tipsTop("删除成功", 'success');
                    // popup.tipsTop("删除失败", 'error');
                }
            } else {
                popup.tipsTop("请选择需要删除的数据", 'warning');
            }
        })

        // 删除
        $('.btn-delete').click(function(params) {
            var data = $(this).parents('tr')[0].dataset;
            if (confirm('确认是否删除')) {
                popup.tipsTop("删除成功", 'success');
                // popup.tipsTop("删除失败", 'error');
            }
        })

        // 获取表格中选择的ID
        function getSelecteId() {
            let temp = [];
            $('tbody [type="checkbox"]').each(function(index, element) {
                if (element.checked == true) {
                    temp.push($(this).parents('tr').data('id'));
                }
            })

            return temp.join(',');
        }
    </script>
</body>

</html>